<template>
  <Modal :value="showModal" title="修改用户信息" @on-cancel="closeModal" :footer-hide="true">
    <Form ref="JForm" :model="formData" :rules="rules">
      <FormItem label="用户名">
        <Input :disabled="true" :value="username"></Input>
      </FormItem>
      <FormItem prop="name" label="姓名">
        <Input v-model="formData.name" placeholder="请输入姓名"></Input>
      </FormItem>
      <FormItem prop="level" label="用户等级">
        <Select :disabled="$store.state.userModule.user.level_id != 3" v-model="formData.level" placeholder="请选择用户等级" :clearable="true">
          <Option v-for="item in levelInfo" :key="item.id" :value="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <Button type="primary" @click="toChangeUser">修改</Button>
    </Form>
  </Modal>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  props: {
    username: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        name: '',
        level: ''
      },
      levelInfo: [],  // 用户权限等级
      rules: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        level: [
          {
            required: true,
            message: '用户等级不能为空',
            trigger: 'change',
            type: "number"
          }
        ]
      }
    }
  },
  watch: {
    'showModal' (val) {
      val == true && this._getUserData()
    }
  },
  mounted () {
    this._getLevelInfo()
  },
  methods: {
    // 修改信息
    toChangeUser () {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._changeUserInfo()
          this.formData = {}
          this.closeModal()
          this.$emit('reload')
        }
      })
    },
    // 关闭页面
    closeModal () {
      this.formData = {
        name: '',
        level: ''
      },
        this.$emit('closeModal')
    },
    // 获取用户信息
    async _getUserData () {
      const url = '/userinfo'
      const res = await this.GET_DATA({
        dataUrl: url,
        username: this.username
      })
      if (res) {
        this.$nextTick(() => {
          this.formData.name = res.data.name
          this.formData.level = parseInt(res.data.userInfo[0].level_id)
        })
      }
    },
    // 获取角色权限等级信息
    async _getLevelInfo () {
      const url = '/levelinfo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.levelInfo = res.data
      }
    },
    // 修改用户信息接口
    async _changeUserInfo () {
      const url = '/edituserinfo'
      const actionsUser = this.$store.state.userModule.user.username
      const res = await this.GET_DATA({
        dataUrl: url,
        actionsUser: actionsUser,
        username: this.username,
        ...this.formData
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>